<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文章编辑</title>
    <link href="./2.12.1/css/layui.css" rel="stylesheet">
</head>
<body>
    <div class="layui-card">
        <div class="layui-card-header" id="form-title">添加文章</div>
        <div class="layui-card-body">
            <form class="layui-form" lay-filter="article-form">
                <input type="hidden" name="id">
                <div class="layui-form-item">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">内容</label>
                    <div class="layui-input-block">
                        <textarea name="content" placeholder="请输入内容" class="layui-textarea" style="min-height: 300px;"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">标签</label>
                    <div class="layui-input-block" id="tag-checkbox">
                        <!-- 标签复选框将通过JS动态生成 -->
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="article-submit">提交</button>
                        <button type="button" class="layui-btn layui-btn-primary" id="cancel-btn">取消</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="./2.12.1/layui.js"></script>
    <script>
        layui.use(['form', 'layer'], function(){
            var form = layui.form;
            var layer = layui.layer;
            
            // 获取URL参数
            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); 
                return null;
            }
            
            // 加载标签数据
            function loadTags() {
                var tags = JSON.parse(localStorage.getItem('tags') || '[]');
                var html = '';
                tags.forEach(function(tag) {
                    html += '<input type="checkbox" name="tags" value="' + tag.id + '" title="' + tag.name + '">';
                });
                document.getElementById('tag-checkbox').innerHTML = html;
                form.render('checkbox');
            }
            
            // 加载文章数据
            function loadArticle() {
                var articleId = getUrlParam('id');
                if (articleId) {
                    document.getElementById('form-title').textContent = '编辑文章';
                    
                    var articles = JSON.parse(localStorage.getItem('articles') || '[]');
                    var article = articles.find(function(item) {
                        return item.id == articleId;
                    });
                    
                    if (article) {
                        form.val('article-form', {
                            id: article.id,
                            title: article.title,
                            content: article.content,
                            tags: article.tags
                        });
                    }
                } else {
                    document.getElementById('form-title').textContent = '添加文章';
                }
            }
            
            // 初始化
            loadTags();
            loadArticle();
            
            // 文章表单提交
            form.on('submit(article-submit)', function(data){
                var articles = JSON.parse(localStorage.getItem('articles') || '[]');
                
                if (data.field.id) {
                    // 编辑文章
                    var index = articles.findIndex(function(article) {
                        return article.id == data.field.id;
                    });
                    
                    if (index !== -1) {
                        articles[index] = {
                            id: parseInt(data.field.id),
                            title: data.field.title,
                            content: data.field.content,
                            tags: data.field.tags || [],
                            createTime: articles[index].createTime
                        };
                    }
                } else {
                    // 添加文章
                    var newId = articles.length > 0 ? Math.max(...articles.map(a => a.id)) + 1 : 1;
                    articles.push({
                        id: newId,
                        title: data.field.title,
                        content: data.field.content,
                        tags: data.field.tags || [],
                        createTime: new Date().toLocaleString('zh-CN')
                    });
                }
                
                localStorage.setItem('articles', JSON.stringify(articles));
                layer.msg('保存成功', {icon: 1}, function(){
                    window.close();
                    if (window.opener) {
                        window.opener.location.reload();
                    }
                });
                return false;
            });
            
            // 取消按钮点击事件
            document.getElementById('cancel-btn').addEventListener('click', function(){
                window.close();
            });
        });
    </script>
</body>
</html>